<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spirit8</title>
    <link rel="icon" href="#">
    <!-- 引入框架文件 -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
    <!-- 重置样式的文件 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <!-- 引入less(css)文件 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />

</head>

<body>
    <!-- Bootstrap导航条 -->
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <!-- 移动端切换导航元素 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Logo -->
                <a class="navbar-brand logo" href="javascript:void(0)">Spirit8</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#box1">HOME</a></li>
                    <li><a href="#box2">ABOUT</a></li>
                    <li><a href="#box3">SERVICES</a></li>
                    <li><a href="#box4">PORTFOLIO</a></li>
                    <li><a href="#box5">TESTMONIALS</a></li>
                    <li><a href="#box6">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- banner -->
    <div class="banner" id="box1">
        <div class="container">
            <h3 class="title">wELCOME on <span>spirit8</span></h3>
            <p class="desc">We are a digital agency with <span>years of experience </span>and with <span>extraordinary
                    people</span></p>
            <a class="more" href="#footer">&#8595;</a>
        </div>
    </div>

    <!-- about -->
    <div class="about" id="box2">
        <div class="middle">
            <div class="about_lt">
                <img src="./assets/image/about_img.png" alt="">
            </div>
            <div class="about_rt">
                <p class="head">About us</p>
                <p class="header"><span>Some</span> words <span>about us</span></p>
                <p class="text">We love building and rebuilding brands through our specific skills. Using colour, fonts,
                    and
                    illustration, we brand companies in a way they will never forget.</p>
                <ul class="ordinal">
                    <li><span class="glyphicon glyphicon-record" aria-hidden="true"></span><span>Mission - </span>
                        <span>We
                            deliver uniqueness and quality</span>
                    </li>
                    <li><span class="glyphicon glyphicon-record" aria-hidden="true"></span><span>Skills - </span>
                        <span>Delivering fast and excellent results</span>
                    </li>
                    <li><span class="glyphicon glyphicon-record" aria-hidden="true"></span><span>Clients - </span>
                        <span>Satisfied clients thanks to our experience</span>
                    </li>
                </ul>
                <button class="btn"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span><span>Browse
                        our
                        work</span></button>
            </div>
        </div>
    </div>

    <!-- team -->
    <div class="team">
        <div class="middle">
            <p class="head">Meet <span>our team</span></p>
            <div class="shape"><img src="./assets/image/team_shape.png" alt=""></div>
            <div class="list">
                <div class="item">
                    <div class="avatar"></div>
                    <div class="content">
                        <p class="title">Jason Statham</p>
                        <p class="subtitle">Knife designer</p>
                        <p class="description">Do not seek to change what has come before. Seek to create that
                            which
                            has
                            not.</p>
                    </div>
                </div>
                <div class="item">
                    <div class="avatar"></div>
                    <div class="content">
                        <p class="title">Van Damme</p>
                        <p class="subtitle">No English</p>
                        <p class="description">Do not seek to change what has come before. Seek to create that
                            which
                            has
                            not.</p>
                    </div>
                </div>
                <div class="item">
                    <div class="avatar"></div>
                    <div class="content">
                        <p class="title">Sylvester Stallone</p>
                        <p class="subtitle">Cigar Lover</p>
                        <p class="description">Do not seek to change what has come before. Seek to create that
                            which
                            has
                            not.</p>
                    </div>
                </div>
                <div class="item">
                    <div class="avatar"></div>
                    <div class="content">
                        <p class="title">Jet Li</p>
                        <p class="subtitle">I need more money</p>
                        <p class="description">Do not seek to change what has come before. Seek to create that
                            which
                            has
                            not.</p>
                    </div>
                </div>
            </div>
            <div class="radio">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- services -->
    <div class="services" id="box3">
        <div class="middle">
            <p class="head">take a look at <span>our services</span></p>
            <div class="shape"><img src="./assets/image/team_shape.png" alt=""></div>
            <p class="para">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
                Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                from a line in section 1.10.32.</p>
            <div class="list">
                <div class="item">
                    <div class="avatar">
                        <img src="./assets/image/services_img1.png" alt="">
                    </div>
                    <div class="content">
                        <p class="title">Web design</p>
                        <p class="description">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
                            a line in section 1.10.32.</p>
                    </div>
                </div>
                <div class="item">
                    <div class="avatar">
                        <img src="./assets/image/services_img2.png" alt="">
                    </div>
                    <div class="content">
                        <p class="title">Mobile apps</p>
                        <p class="description">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
                            a line in section 1.10.32.</p>
                    </div>
                </div>
                <div class="item">
                    <div class="avatar">
                        <img src="./assets/image/services_img3.png" alt="">
                    </div>
                    <div class="content">
                        <p class="title">PHOTOGRAPHY</p>
                        <p class="description">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
                            a line in section 1.10.32.</p>
                    </div>
                </div>
                <div class="item">
                    <div class="avatar">
                        <img src="./assets/image/services_img4.png" alt="">
                    </div>
                    <div class="content">
                        <p class="title">marketing</p>
                        <p class="description">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
                            a line in section 1.10.32.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- clients -->
    <div class="clients">
        <div class="middle">
            <p class="head">SOME OF <span>OUR CLIENTS</span></p>
            <div class="shape"><img src="./assets/image/team_shape.png" alt=""></div>
            <div class="logos"><img src="./assets/image/clients_logos.png" alt=""></div>
            <div class="radio">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- portfolio -->
    <div class="portfolio" id="box4">
        <div class="middle">
            <p class="head">take a look at <span>our work</span></p>
            <div class="shape"><img src="./assets/image/team_shape.png" alt=""></div>
            <p class="para">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
                Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics,
                very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                comes from a line in section 1.10.32.</p>
            <div class="box">
                <div class="subject">
                    <div class="left">
                        Filter by type
                    </div>
                    <div class="right">
                        <a href="javascript:void(0)">All</a>
                        <a href="javascript:void(0)">Web design</a>
                        <a href="javascript:void(0)">Mobile design</a>
                        <a href="javascript:void(0)">Photograpy</a>
                    </div>
                    <div class="select">
                        <select name="select">
                            <option>请选择</option>
                            <option>All</option>
                            <option>Web design</option>
                            <option>Mobile design</option>
                            <option>Photograpy</option>
                        </select>
                    </div>
                </div>

                <div class="list">
                    <div class="item">
                        <img src="./assets/image/work-img.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img2.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img2.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img2.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img2.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img3.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img3.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img3.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./assets/image/work-img3.png" />
                        <div class="mask">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <span class="plus">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- testimonials -->
    <div class="testimonials" id="box5">
        <div class="middle">
            <p class="head"><span>our clients'</span> testimonials</p>
            <div class="shape"><img src="./assets/image/team_shape.png" alt=""></div>
            <p class="para">This book is a treatise on the theory of ethics, very popular during the Renaissance.
                The
                first line of
                Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
            <p class="name">Dean Martin, <span>CEO Acme Inc.</span></p>
            <div class="radio">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- contact -->
    <div class="contact" id="box6">
        <div class="middle">
            <p class="head">feel free to <span>contact us</span></p>
            <div class="shape"><img src="./assets/image/team_shape.png" alt=""></div>
            <p class="para">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
                (The
                Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of
                ethics,
                very popular during the Renaissance. </p>
            <div class="from">
                <div class="name">
                    <label>Name <span>*</span></label>
                    <div class="input_box">
                        <input type="text" name="" id="name">
                    </div>
                </div>
                <div class="email">
                    <label>Email address <span>*</span></label>
                    <div class="input_box">
                        <input type="email" name="" id="email">
                    </div>
                </div>
                <div class="message">
                    <label>Message <span>*</span></label>
                    <div class="input_box">
                        <textarea id="text"></textarea>
                    </div>
                </div>
                <div class="btn">
                    <button>SEND</button>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer" id="footer">
        <div class="lt">
            <p>ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></p>
        </div>
        <div class="rt">
            <img src="./assets/image/facebook.png" alt="">
            <img src="./assets/image/twitter.png" alt="">
            <img src="./assets/image/google.png" alt="">
            <img src="./assets/image/linkedin.png" alt="">
            <img src="./assets/image/dribbble.png" alt="">
        </div>
    </div>

    <!-- 返回顶部 -->
    <div class="up" id="up">
        <a href="#box1">
            <img src="./assets/image/top.svg" />
        </a>
    </div>

</body>

</html>
<!-- 引入jquery文件 -->
<script src="./assets/js/jquery.min.js"></script>
<!-- 引入bootstrapJS的脚本文件 -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- 引入less的css解析器 -->
<script src="./assets/js/less.min.js"></script>